import React, { ChangeEvent, useState } from 'react'
import * as api from '../../services/api'
import style from './style.module.less'
import { Form, Input, Button, message } from 'antd'
import { UserOutlined, LockOutlined } from '@ant-design/icons'
import { useHistory, Link } from 'react-router-dom'

export default function Registry() {
  let history = useHistory()

  const limit: number = 15

  const [account, setAccount] = useState('')
  const [pwd, setPwd] = useState('')
  const [pwdAgain, setPwdAgain] = useState('')

  function setAccountOnChange(e: ChangeEvent<HTMLInputElement>) {
    setAccount(e.target.value)
  }

  function setPwdOnChange(e: ChangeEvent<HTMLInputElement>) {
    setPwd(e.target.value)
  }

  function setPwdAgainOnChange(e: ChangeEvent<HTMLInputElement>) {
    setPwdAgain(e.target.value)
  }

  async function registry() {
    try {
      if (checkPwd()) {
        let res = await api.registry(account, pwd)
        if (res.data.stat === 'ok') {
          message.destroy()
          message.success('注册成功')
          history.push('/login')
        } else {
          message.destroy()
          message.error(res.data.msg)
        }
        console.log(res.data)
      } else {
        message.destroy()
        message.error('两次输入的密码不一样')
      }
    } catch (e) {
      throw e
    }
  }

  function checkPwd() {
    return pwd === pwdAgain
  }

  return (
    <div>
      <React.Fragment>
        <div className={style.box}>
          <Form name="registry" className={style.form_registry}>
            <span>木易创作</span>
            <Form.Item
              name="username"
              className={style.form_registry_input_item}
              rules={[{ required: true, message: '请输入你的用户名!' }]}>
              <Input
                prefix={<UserOutlined />}
                type="text"
                placeholder="用户名/长度不能超过15个字符"
                value={account}
                maxLength={limit}
                onChange={(e) => setAccountOnChange(e)}
              />
            </Form.Item>
            <Form.Item
              name="password"
              className={style.form_registry_input_item}
              rules={[{ required: true, message: '请输入你的密码!' }]}>
              <Input
                prefix={<LockOutlined />}
                type="password"
                placeholder="密    码/长度不能超过15个字符"
                value={pwd}
                maxLength={limit}
                onChange={(e) => setPwdOnChange(e)}
              />
            </Form.Item>
            <Form.Item
              name="passwordAgain"
              className={style.form_registry_input_item}
              rules={[{ required: true, message: '请再次输入你的密码!' }]}>
              <Input
                prefix={<LockOutlined />}
                type="password"
                placeholder="再次输入密码"
                value={pwdAgain}
                onChange={(e) => setPwdAgainOnChange(e)}
              />
            </Form.Item>
            <Link to="/login" className={style.form_registry_login}>
              已有账号？ 点击登录
            </Link>
            <Form.Item>
              <Button
                type="primary"
                htmlType="submit"
                className={style.form_registry_button}
                onClick={registry}>
                注册
              </Button>
            </Form.Item>
          </Form>
        </div>
      </React.Fragment>
    </div>
  )
}
